<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>
<div id="app">
    <table border="1px" width="400px">
        <tr>
            <td>
                id
            </td>
            <td>
                name
            </td>
            <td>
                age
            </td>
            <td>
                score
            </td>
        </tr>
        <tr v-for="student in students" v-if="student.score >= 60">
            <td>
                {{student.id}}
            </td>
            <td>
                {{student.name}}
            </td>
            <td>
                {{student.age}}
            </td>
            <td>
                {{student.score}}
            </td>
        </tr>
    </table>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
            students: [
                {
                    id: 0,
                    name: "jack",
                    age: 19,
                    score: 60
                },
                {
                    id: 1,
                    name: "mary",
                    age: 20,
                    score: 50
                },
                {
                    id: 2,
                    name: "albert",
                    age: 21,
                    score: 100
                },
                {
                    id: 3,
                    name: "rich",
                    age: 18,
                    score: 20
                }
            ]
        },
        methods: {}
    });
</script>
</body>
</html>